<template>
	<view>
		<view class="detail-title2">
			备件申请单号：{{listInfo.applyNum}}
		</view>
		<view class="detail-title white-bg detail-title-border3">
			<view class="left-title">工单信息</view>
			<view class="right-title">{{listInfo.orderNum}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border3">
			<view class="left-title">申请退还数量</view>
			<view class="right-title">{{listInfo.refundAmount}}</view>
		</view>
		<!-- <view class="detail-title white-bg detail-title-border">
			<view class="left-title">备注信息</view>
			<view class="right-title">{{listInfo.remark}}</view>
		</view> -->
		<view class="detail-title white-bg detail-title-border3">
			<view class="left-title">退还申请人</view>
			<view class="right-title">{{listInfo.refundUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border3">
			<view class="left-title">退还审批人</view>
			<view class="right-title">{{listInfo.dealUserName}}</view>
		</view>
		<view class="detail-title white-bg detail-title-border3">
			<view class="left-title">申请时间</view>
			<view class="right-title">{{listInfo.createTime}}</view>
		</view>
		<view class="detail-title2 title-tishi">
			提示：请确定已收到退还备件
		</view>
		<view class="bx-list detail-title-border3">
			<view class="bx-list-title" @click="togochuliResult">
				<view class="left">
					<view style="color: red;">*</view>处理结果
				</view>
				<view class="right1">
					<view class="color4" v-if="dealResultName" >{{dealResultName}}</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list detail-title-border2">
			<view class="bx-list-title">
				<view class="left">
					<view class="red">*</view>备件退还选择
				</view>
				<!-- 				<view class="right1">
					<view>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view> -->
			</view>
		</view>

		<view v-for="(item,index) in listInfo.partDetailResponses" :key="index">
			<view class="list-wrapper">
				<view class="list-item">
					<view class="left-icon">
						<image :src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
						</image>
					</view>
					<view class="right-txt">
						<view class="txt1">{{item.partNum}}{{item.partName}}</view>
						<view class="txt3">
							<view>{{item.partTypeName}}</view>
							<view style="color: #2f2f2f;">退还数量：{{item.amount}}</view>
						</view>
						<!-- <view class="txt2">总价值：{{item.price}}</view> -->
					</view>
				</view>
			</view>
			<view>
				<view v-for="(c,i) in item.partRetrievalDetails" :key="i">
					<u-gap height="8" bgColor="#f2f2f2" v-if="i > 0"></u-gap>
					<view class="bx-list detail-title-border3">
						<view class="bx-list-title" @click="togoBatcheSelect(item,index,c,i)">
							<view class="left">
								<view class="red">*</view>
								退还批次
							</view>
							<view class="right1">
								<view>{{c.batchNum!=''?c.batchNum:''}}{{'【'+c.expireDate+'】'}}</view>
								<!-- <view class="iconfont icon-app-xiangyou"></view> -->
							</view>
						</view>
					</view>
					<view class="bx-list detail-title-border3">
						<view class="bx-list-title">
							<view class="left">
								<view style="color: red;">*</view>
								退还数量
								<!-- <view class="kucun-num">库存数量:{{c.amount}}</view> -->
							</view>
							<view class="right1">
								<view class="txt-right">
									<view class="addnum">
										<u-number-box min="0" :max="item.amount>=c.amount?c.amount:item.amount"
											v-model="c.chukuNum" @change="(e)=>onChange(e,c.batchNum)" :name="i">
											<!-- <view slot="minus" class="minus">
												<view class="iconfont icon-app-jianjinyong" style="font-size: 40rpx;">
												</view>
											</view>
											<text slot="input" style="width:40px; text-align: center;font-size: 28rpx;"
												class="input">{{c.chukuNum}}</text>
											<view slot="plus" class="plus">
												<view class="iconfont icon-app-jiajinyong"
													style="font-size: 40rpx; color: #0F53AC;"></view>
											</view> -->
										</u-number-box>
									</view>
								</view>
							</view>
						</view>
						<view class=""
							style="text-align: right;padding:0 16rpx 10rpx 0;color: #8c8c8c;font-size: 28rpx;">
							该批次可退还数量{{c.amount}}件
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="8" bgColor="#f2f2f2"></u-gap>
		<view class="kiss-upDown-list" style="margin-top: 2rpx; padding-bottom: 20rpx;">
			<view class="bx-list-title">
				<view class="left">
					备注信息
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="params.remark" placeholder="请输入备注信息"></u--textarea>
			</view>
		</view>
		<view class="clear-bottom"></view>
		<view class="bx-bottom">
			<view class="btn" @click="togoConfirm">提交</view>
		</view>
		<!-- 处理结果弹窗 -->
		<u-popup :show="isShow" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(c)" v-for="(c,index) in chuliList" :key="index">
					{{c.label}}
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				detailId: '',
				listInfo: {},
				isShow: false,
				chuliList: [{
						label: '全部退还',
						value: 1
					},
					{
						label: '部分退还',
						value: 2
					},
					{
						label: '未退还',
						value: 3
					}
				],
				params: {
					dealResult: '', //处理结果；1.全部退还   2.部分退还   3.未退还
					refundId: '', //退还id
					remark: '', //备注
					detailRequests: []
				},
				dealResultName: ''
			}
		},
		onLoad(options) {
			if (options) {
				this.detailId = options.id;
				this.params.refundId = this.detailId;
			}
			this.getDetailInfo()
		},
		methods: {
			getDetailInfo() {
				uni.$u.http.get(`/device/mobile/devicePartRefund/getPartRefundDeal/${this.detailId}`).then(res => {
					if (res.code == 0) {
						this.params.detailRequests = [];
						if (res.data.partDetailResponses.length > 0) {
							res.data.partDetailResponses.forEach(item => {
								item.partRetrievalDetails.forEach(s => {
									s.chukuNum = 0;
									let dd = {
										partId: item.partId,
										batchNum: s.batchNum,
										amount: ''
									}
									this.params.detailRequests.push(dd);
								})
							})
						}
						this.listInfo = JSON.parse(JSON.stringify(res.data));
						console.log('this.listInfo====>', this.listInfo)

					}
				}).catch(err => {})
			},
			open() {

			},
			close() {
				this.isShow = false
			},
			updateItem(item) {
				this.params.dealResult = item.value;
				this.dealResultName = item.label;
				this.isShow = false;
			},
			//处理结果
			togochuliResult() {
				this.isShow = true;
			},
			togoBatcheSelect(info, i, item, index) {
				// console.log('下拉弹窗---->', item, this.BatchList);
				// this.listIndex=i;
				// this.selectIndex = index;
				// this.showBatch = true;

			},
			onChange(e, batchNum) {
				this.params.detailRequests.forEach(item => {
					if (item.batchNum == batchNum) {
						item.amount = e.value
					}
				})
				// if(this.listInfo.partDetailResponses[e.name].chukuNum>this.listInfo.partDetailResponses[e.name].stockNum){
				// 	this.listInfo.partDetailResponses[e.name].chukuNum=this.listInfo.partDetailResponses[e.name].stockNum
				// 	return uni.$u.toast('不能超过最大库存')
				// }
			},
			togoConfirm() {
				if (!this.params.dealResult) return uni.$u.toast('请选择处理结果');
				if (this.params.detailRequests.length == 0) return uni.$u.toast('备件退还选择不能为空');
				let num = 0
				this.params.detailRequests.forEach(item => {
					if (!item.amount) {
						item.amount = 0
					}
					num = num + item.amount
				})
				if (this.params.dealResult == 1) {
					if (num != this.listInfo.refundAmount && num != 0) {
						return uni.$u.toast('实际退还数量小于退还数量,处理结果请选择部分退还');
					}
					if (num == 0) {
						return uni.$u.toast('实际退还数量等于0,处理结果请选择未退还');
					}
				}
				if (this.params.dealResult == 2) {
					if (num == this.listInfo.refundAmount) {
						return uni.$u.toast('实际退还数量等于退还数量,处理结果请选择全部退还');
					}
					if (num == 0) {
						return uni.$u.toast('实际退还数量等于0,处理结果请选择未退还');
					}
				}
				if (this.params.dealResult == 3) {
					if (num != 0) {
						return uni.$u.toast('实际退还数量不为0,请重新选择处理结果');
					}
				}
				uni.$u.http.post(`/device/mobile/devicePartRefund/auditPartApply`, this.params).then(res => {
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/subPackagesB/bjreturn/index'
							})
						}, 1000)
					}
				}).catch(err => {})

			},
			disablePlus(total, item, c, i) {
				console.log('disablePlus===', total, item, c, i)
				if (c.chukuNum >= total) {
					return true
				} else {
					if (c.chukuNum >= c.stockNum) {
						return true
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.title-tishi {
		font-size: 28rpx;
		color: #0F53AC;
	}

	.bx-list {
		background: #fff;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 20rpx;


			.left {
				display: flex;
				font-size: 34rpx;
				font-weight: 400;
				color: #4D4D4D;

				.kucun-num {
					font-size: 28rpx;
					color: #8c8c8c;
					margin-left: 20rpx;
				}
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #8c8c8c;
			}
		}

		.input-textrea {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}
	}

	.list-wrapper {
		// padding-bottom: 30rpx;
		// border-bottom: 1px solid #f2f2f2;

		.list-item {
			display: flex;
			padding: 32rpx;
			background: #fff;
			border-radius: 4px;
			border-bottom: 1px solid #f2f2f2;
			// margin: 10rpx 00rpx;

			.left-icon {
				border-radius: 8rpx;

				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 8rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;
				width: 100%;
				display: flex;
				flex-flow: column;
				justify-content: space-between;

				.txt1 {
					font-size: 32rpx;
					color: #2B2B2B;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
					word-wrap: break-word;

				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin: 10rpx 0;
				}

				.txt3 {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					// margin: 10rpx 0;
					color: #8c8c8c;
					font-size: 28rpx;
					// margin-top: 35rpx;
				}
			}
		}

		.item-radio {
			display: flex;
			align-items: center;
			margin: 0 30rpx;

			.left-radio {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #2b2b2b;

				.select-bg {
					color: #0F53AC;
					font-size: 40rpx;
				}
			}

			.right-radio {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #2b2b2b;
				margin-left: 100rpx;
			}
		}
	}

	.clear-bottom {
		width: 100%;
		height: 230rpx;
	}

	.bx-bottom {
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 48rpx 0 90rpx 0;
		position: fixed;
		bottom: 0;

		.btn {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}
</style>